<template>
  <div id="home">
    <div id="container">
		<div class="nav">
			<ul>
				<li href="#" 
				v-for="(nav,index) in navList"
				:key="index">{{nav}}</li>
			</ul>
		</div>
		<div class="banner" @mouseenter="showBanner" @mouseleave="showBanner">
			<img src="../../common/img/banner-left.webp" alt="">
			<transition 
			enter-active-class="animate__animated animate__rotateInDownLeft"
			leave-active-class="animate__animated animate__fadeOutLeft">
				<div class="banner-right" 
				v-show="isShowBanner"
				>
					<img src="../../common/img/banner-right.webp" alt="">
				</div>
			</transition>
			
		</div>
		<MiniWindow/>
			<el-row>
				<!-- 商品分类菜单 -->
				<el-col :span="4" :offset="1" class="cateList">
					<div class="cate_img">
						<i class="el-icon-menu"></i>
						商品分类
					</div>
					<el-menu class="el-menu-vertical-demo">
					  <el-menu-item index="cate.cate_id"
						v-for="(cate) in categoryList" 
						:key="cate.cate_id" 
						@click="getRList(cate.cate_id)">
              			<i :class="cate.cate_icon"></i>
              			<span slot="title">{{cate.cate_name}}</span>
					  </el-menu-item>
					</el-menu>
			  </el-col>
			  <!--轮播图-->
				<el-carousel height="470px">
					<el-carousel-item v-for="casual in homecasual" :key="casual.id">
						<img :src="casual.imgurl" alt="">
					</el-carousel-item>
				</el-carousel>
				<div class="slider_list">
					<SliderList/>
				</div>
				<!-- 登录信息板块 -->
				<el-col :span="4" class="con_log">
					<div>
            			<img :src="userInfo.user_avatar" v-if="userInfo.user_avatar"/>
						<img src="./img/no_login.jpg" v-else/>
					</div>
					<div class="hi">Hi~ 欢迎逛京东！</div>
					<div v-if="!userInfo.id">
						<router-link to="/login">登录</router-link>
						<router-link to="/login">注册</router-link>
					</div>
					<div v-else class="userIn">
						<a v-if="userInfo.user_nickname">您好,{{ userInfo.user_nickname }}</a>
						<a v-else>您好,{{ userInfo.user_name | nameFormat }}</a>
						<router-link to="/me">个人中心</router-link>
          			</div>
					<div class="user_profit">
						<button class="welfare">新人福利</button>
						<button class="vip">PLUS会员</button>
					</div>
					<div class="news">
                        <h5>京东快报</h5>
                        <span>更多&nbsp;&gt;</span>
                        <ul>
                            <li 
                            v-for="(n,index) in news" 
                            :key="index">
                            <div id="label">{{n.label}}</div>
                            {{n.title}}</li>
                        </ul>
                    </div>
					<div class="service">
                        <ul class="service_list">
                            <li
                            v-for="(s,index) in serviceList" 
                            :key="index">
                            <div>
                                <img :src="s.url" alt="">
                            </div>
                            <div class="service_name">{{s.name}}</div>
                            </li>
                        </ul>
                    </div>
				</el-col>
			</el-row>
			<!-- 秒杀专区 -->
			<CountDown/>

			<!-- 侧边栏 -->
			<SideNav/>

			<!-- 动画组件 -->
			<Move/>
			<!-- 分类产品展示区域 -->
			<div class="product" v-for="(cate) in categoryList.slice(0,5)" :key="cate.cate_id">
				<div class="pro_line">
					<h3>{{ cate.cate_name }}</h3><div><a @click.prevent="getRList(cate.cate_id)">MORE</a></div>
				</div>
				<div class="pro_show" >
          <ProductItem v-for="(pro) in homeshoplist[cate.cate_id - 1]"  :key="pro.id"   :pro="pro"/>
				</div>
			</div>
		</div>
		<div class="end_show"></div>

		<!-- 尾部 -->
		<div id="footer">
			<img src="./img/footer.png" />
			<div class="footer_text"></div>
		</div>

		<!--左侧微型购物车区域-->
    <DrawerSection v-if="this.$route.path.indexOf('/home') != -1" @goShopCar="goShopCar"/>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import DrawerSection from './children/DrawerSection/DrawerSection'
  import ProductItem from '../../components/ProductItem/ProductItem'
  import SliderList from '../../components/SliderList'
  import CountDown from '../../components/CountDown'
  import Move from '../../components/Move'
  import SideNav from '../../components/SideNav'
  import MiniWindow from '../../components/MiniWindow'
  import { MessageBox } from 'element-ui'

  export default {
	  data() {
		  return {
			navList:[
                '秒杀',
                '优惠券',
                'PLUS会员',
                '品牌闪购',
                '拍卖',
                '京东家电',
                '京东超市',
                '京东生鲜',
                '京东国际',
                '京东云'
            ],
			news:[
                {label:'最新',title:'超星选环球臻味坚果礼包测评，咔嚓咔嚓吃出浓浓年味'},
                {label:'推荐',title:'买糖不纠结，选择阿麦斯糖果，大人小孩都爱吃'},
                {label:'热门',title:'海信E3F和海信E3F-PRO超音画电视，究竟该怎么选'},
                {label:'最新',title:'品质奶源，便携梦幻盖，特仑苏纯牛奶助力营养早餐'},
            ],
			serviceList:[
                {url:require('../../common/img/service1-tc.png'),name:'话费'},
                {url:require('../../common/img/service2-at.png'),name:'机票'},
                {url:require('../../common/img/service3-h.png'),name:'酒店'},
                {url:require('../../common/img/service4-g.png'),name:'游戏'},
                {url:require('../../common/img/service5-ref.png'),name:'加油卡'},
                {url:require('../../common/img/service6-tt.png'),name:'火车票'},
                {url:require('../../common/img/service7-cf.png'),name:'众筹'},
                {url:require('../../common/img/service8-mm.png'),name:'理财'},
                {url:require('../../common/img/service9-bm.png'),name:'白条'},
                {url:require('../../common/img/service10-ct.png'),name:'电影票'},
                {url:require('../../common/img/service11-c.png'),name:'企业购'},
                {url:require('../../common/img/service12-gc.png'),name:'礼品卡'},
            ],
			isShowBanner:false
			
		  }
	  },
    computed: {
      ...mapState(['homecasual','categoryList','homeshoplist','userInfo'])
    },
    components: {
      DrawerSection,
      ProductItem,
	  SliderList,
	  CountDown,
	  Move,
	  SideNav,
	  MiniWindow
    },
    methods:{
		showBanner(){
			console.log('111');
			this.isShowBanner = !this.isShowBanner
		},
      getRList(cate_id){
        this.$router.replace('/search/' + cate_id + '/1');
      },
      goShopCar(){
        if(this.userInfo.id){
          this.$router.replace('/shopcar');
        }else{
          MessageBox({
            type: 'info',
            message: "请先登录!",
			      showClose: true,
          });
        }
      },
	  
    },
    mounted() {
		// console.log(this.$props);
        // 请求轮播图数据
        this.$store.dispatch('reqHomeCasual');
        // 请求分类数据
        this.$store.dispatch('reqCategory');


        // 请求商品数据
        if(this.userInfo && this.userInfo.id){
          let user_id = this.userInfo.id;
          this.$store.dispatch('reqCartsGoods',{user_id});
        }
    },
    watch: {
      categoryList() {
        this.$nextTick(() => {
          // 请求首页商品数据
          this.$store.dispatch('reqHomeShopList');
        });
      },
    }
  }
</script>

<style scoped>
  #home{
	font-family:  "Microsoft YaHei";
  }
	/*商品分类菜单*/
	#container{
		position: relative;
		margin: 0 auto;
		width: 100%;
		background: rgba(245, 245, 245, 0.5);
	}
	.nav{
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 15px;
        color: #333;
		background-color: #fff;
    }
    .nav ul{
        margin: 0 auto;
    }
    .nav li{
		list-style: none;
        float: left;
        margin: 0 11px;
    }
    .nav li:nth-child(1),.nav li:nth-child(2){
        font-weight: 700;
        color:#e1251b;
    }
	.banner{
		margin-top:  10px;
		margin-left: 85px;
		position: absolute;
		width: 272px;
		height: 470px;
	}
	.banner-right{
		z-index: 10;
		position: absolute;
		margin-top: -470px;
		margin-left: 272px;
		/* display: none; */
	}
	.el-row{
		width: 1190px;
		height: 470px;
		margin: 10px auto;
	}
	.el-row div{
		float: left;
	}
	#container .el-row .el-col{
		height: 100%;
	}
	.el-col-4{
		width: 190px;
		margin-right: 10px;
		margin-left: 0;
	}
	.el-row .cateList .cate_img{
		width: 190px;
		text-indent: 14px;
		height: 40px;
		color: white;
		line-height: 40px;
		font-size: 16px;
		background: linear-gradient(90deg,red,#ff3264);
	}
	.el-menu{
		width: 191px;
		height: 429px;
		margin-top: 40px;
		font-size: 16px;
		/* color: #fff; */
		background: linear-gradient(90deg,red,#ff3264);
	}
	.el-menu-item{
		height: 39px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		color: #fff;
	}
	.el-menu-item i {
		color: #fff;
	}
	.el-menu-item i:hover{
		color: #e1251b;
	}
	.el-menu-item:hover{
		background-color: #fff;
		color: #e1251b;
	}
	/*轮播图区域*/
	.el-carousel ul{
		width: 350px;
	}
	.el-carousel--horizontal{
		width: 590px;
	}
	.el-carousel--horizontal>.el-carousel__indicators--horizontal{
		width: 350px;
	}
	/deep/ .el-carousel__button {
		
        width: 10px;
        height: 10px;
        border: none;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.2);
    }
	/deep/ .is-active .el-carousel__button {
        background: #fff;
    }
	.slider_list{
        width: 190px;
        height: 470px;
		margin: 0 10px;
    }
	/*登录信息区域*/
	#container .el-row .con_log.el-col{
		margin-right: 0;
		background: white;
		text-align: center;
		font-size: 12px;
		color: #333;
		height: 470px;
	}
	.con_log>div>img{
		width: 40px;
		height: 40px;
        margin: 20px;
        border: 2px solid #fff;
		border-radius: 50%;
	}
	.hi{
		margin-top: 20px;
	}
	.con_log a{
		margin-right:10px;
		color: #333;
		cursor: pointer;
		text-decoration: none;
	}
	.user_profit{
		margin-left: 20px;
	}
  .con_log>.userIn>a{
    display: block;
  }
	.con_log a:hover{
		color: #e1251b;
	}
	.con_log button{
		margin-right: 5px;
		width: 70px;
		height: 25px;
		line-height: 25px;
		font-size: 12px;
		text-align: center;
		border-radius:13px;
		box-shadow: 6px 8px 20px rgba(45,45,45,0.15);
		outline: none;
		border: none;
	}
	.con_log .welfare{
		color: #e43f3b;
		background: white;
	}
	.con_log .vip{
		color: #e5d790;
		background: #2d2d2a ;
	}
	.con_log button:hover{
		color: white;
		background: #e43f3b;
	}
	/* 京东快报 */
	.news{
		margin-top: 10px;
        width: 170px;
        padding: 0 10px;
        color: #999;
        font-size: 12px;
    }
    .news h5{
		margin-left: -70px;
		/* margin-top: 10px; */
        color: #333;
		font-weight: 700;
        font-size: 14px;
    }
    .news span{
        margin-top: -25px;
        float: right;
    }
    .news ul{
        width: 180px;
		padding: 0;
    }
    .news li{
        margin-bottom: 5px;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        text-overflow: ellipsis;
    }
    #label{
        width: 35px;
        height: 16px;
        margin-right: 10px;
        color: #e1251b;
        text-align: center;
        background-color: rgba(225, 37, 27, 0.08);
    }
	/* 服务分类 */
	.service_list{
        width: 190px;
        height: 220px;
        color: #333;
        font-size: 12px;
		padding: 0;
    }
    .service_list li{
		list-style: none;
        float: left;
        width: 62px;
        height: 55px;
        padding: 0 15px;
    }
    .service_list img{
        width: 28px;
    }
    .service_list li div{
        float: left;
    }
    .service_name{
        width: 63px;
        height: 27px;
        margin-left: -17px;
        text-align: center;
    }

	
	/*每类产品的简单展示*/
	#container>.product{
		margin-top: 30px;
		width: 100%;
		height: 350px;
	}
	.product>.pro_line{
		width: 100%;
		height: 50px;
		text-align: center;
		line-height: 50px;
		font-size: 26px;
		font-family: sans-serif;
		font-weight: normal;
		color: #222;
		margin-bottom: 10px;
	}
	.pro_line>h3{
		display: inline-block;
	}
	.pro_line>div{
		display: inline-block;
		margin-left: 15px;
		cursor: pointer;
	}
	.pro_line>div>a{
		color: red;
		font-weight: 700;
		font-size: 17px;
		text-decoration: none;
		transition: 0.5s;
	}
	.pro_line>div>a:after {
		content: '»';
		opacity: 0;       /*opacity属性不占用文档流的空间*/
		transition: 0.5s;
	}
	.pro_line>div:hover a:after {
		opacity: 1;
	}
	.product>.pro_show{
		margin: 0 auto;
		padding-left: 20px;
		width: 980px;
		height: 200px;
	}
	.pro_1{
		width:100%;
		text-align:center;
		margin-top:300px;
	}
	.pro_1>.item_content{
		width:100%;
		text-align:center;
	}
	/*底部对商城的补充说明*/
	#footer{
		/* margin-top: -80px; */
		width: 100%;
		height: 200px;
		background: #F0F3EF;
	}
	#footer>img{
		display: block;
		margin: 0 auto;
	}
	#footer>.footer_text{
		width: 100%;
		border-top: 1px solid #DEDEDE;
	}
</style>
